<template>
	<uni-popup ref="poput" type="bottom">
		<view class="top-box flex_sbc">
			<view class="uni-585C66" @click="close">取消</view>
			<view class="z-font-32">{{ props.title }}</view>
			<view class="uni-color-main" @click="done">完成</view>
		</view>
		<view class="uni-white-bg uni-pt-16">
			<view v-if="props.remark" class="remark">
				<uni-icons type="sound-filled" size="18" color="#FF7742"></uni-icons>
				{{ props.remark }}
			</view>
			<picker-view :value="pickerValue" @change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item, index) in dataList" :key="index">
						{{ props.props.label ? item[props.props.label] : item }}
					</view>
				</picker-view-column>
			</picker-view>
		</view>
	</uni-popup>
</template>
<script setup>
import { ref, reactive } from 'vue';
const props = defineProps({
	title: {
		type: String,
		default: '标题'
	},
	list: {
		type: Array,
		default: () => []
	},
	value: {
		type: String,
		default: ''
	},
	remark: String,
	props: {
		type: Object,
		default: () => {}
	}
});

const dataList = ref([]);
const poput = ref();

function open() {
	pickerValue.value = [props.value || 0];
	dataList.value = props.list;
	poput.value.open();
}

function close() {
	poput.value.close();
}
const pickerValue = ref([props.value || 0]);

function bindChange(e) {
	pickerValue.value = e.detail.value;
}

const emit = defineEmits(['change']);

function done() {
	close();
	emit('change', dataList.value[pickerValue.value[0] || 0]);
}
defineExpose({
	open,
	close
});
</script>
<style lang="scss" scoped>
.top-box {
	width: 100vw;
	height: 96rpx;
	background: #ffffff;
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	box-sizing: border-box;
	padding: 0 32rpx;
	border-bottom: 2rpx solid #ebeef5;
}

.picker-view {
	width: 750rpx;
	height: 600rpx;
	background: #ffffff;
}

.item {
	line-height: 60rpx;
	text-align: center;
}

.remark {
	width: 686rpx;
	font-size: 24rpx;
	background: #fff4f0;
	border-radius: 16rpx;
	box-sizing: border-box;
	padding: 16rpx;
	margin: 0 32rpx;
}
</style>
